<template>
  <div>{{ count }}</div>
  <div>{{ rawHtml }}</div>
  分割线
  <div v-html="rawHtml"></div>
  分割线
  <div id="htmlId"></div>
  <div v-html="rawHtml1"></div>
  <button @click="handleClick">点击</button>
</template>

<script setup>
import { onMounted, ref } from 'vue'
const count = ref(0)
//在当前组件实例上，将此元素的 innerHTML 与 rawHtml 属性保持同步。
//注意：此功能仅在客户端渲染时有效
const rawHtml = '<h1 style="color:red">标题1</h1><h2>标题2</h2>' + '{{' + count.value + '}}'
const rawHtml1 = "<p>新年特惠，试试费风格非官方</p>\n<p><img title=\"4.jpg\" src=\"https://evcar-om.oss-cn-shanghai.aliyuncs.com/1760268766200807424.jpg\" alt=\"4.jpg\" width=\"1440\" height=\"730\"></p>"

console.log('rawHtml =', rawHtml)
// template挂载完成后,回调触发
onMounted(() => {
  console.log('已经挂载好了')
  const div = document.getElementById('htmlId')
  console.log('div=', div)
  div.innerHTML = rawHtml // v-HTML同步interHtml
})
const handleClick = () => {
  count.value++
}
</script>

<style scoped></style>
